<template>
  <div class="app-container">
    <el-dialog
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
      @close="dialogClose"
      class="aMDialog"
    >
      <div slot="title" style="display: flex">
        <div
          style="
            line-height: 24px;
            font-size: 18px;
            color: #303133;
            margin-right: 10px;
          "
        >
          周/月报
        </div>
        <div style="display: flex; font-size: 12px; color: rgb(153, 153, 153)">
          <div style="margin-right: 5px">注:</div>
          <div>
            <p>第一行：回测收益率/最大回撤</p>
            <p>第二行：实盘收益率/最大回撤</p>
          </div>
        </div>
      </div>
      <div class="dialog-header">
        <div class="top">
          <div v-show="dateType === 'year'">
            <span style="margin-right: 5px">年汇总</span>
            <span>
              回测 {{ yearPnl }}% /
              <span class="gray">{{ yearMaxDown }}%</span>
              <span style="margin-left: 10px"></span>
              实盘 {{ realYearPnl }}% /
              <span class="gray">{{ realYearMaxDown }}%</span>
            </span>
          </div>
          <div v-show="dateType === 'month'">
            <span style="margin-right: 5px">月汇总</span>
            <span>
              回测 {{ monthPnl }}% /
              <span class="gray">{{ monthMaxDown }}%</span>
              <span style="margin-left: 10px"></span>
              实盘 {{ monthRealPnl }}% /
              <span class="gray">{{ monthRealMaxDown }}%</span>
            </span>
          </div>
        </div>
        <div class="bottom">
          <div style="display: flex">
            <el-radio-group v-model="dateType" style="margin-bottom: 30px">
              <el-radio-button label="year">年</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
            </el-radio-group>
            <div style="display: flex; margin: 10px 0 0 20px">
              <div style="margin-right: 10px">下级展示</div>
              <el-radio-group v-model="tipsType">
                <el-radio :label="0" style="margin-right: 20px">
                  按分类
                </el-radio>
                <el-radio :label="1">按策略</el-radio>
              </el-radio-group>
            </div>
          </div>

          <el-date-picker
            v-show="dateType === 'month'"
            v-model="date"
            type="month"
            placeholder="选择月"
            :picker-options="pickerOptions"
          ></el-date-picker>

          <el-date-picker
            v-show="dateType === 'year'"
            v-model="dateYear"
            type="year"
            placeholder="选择年"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </div>
      <!-- 月度 -->
      <div v-show="dateType === 'month'" class="monthProfitLoss">
        <el-calendar
          v-model="calendarDate"
          class="tg-el-calendar"
          :first-day-of-week="7"
        >
          <template slot-scope="scope" slot="dateCell">
            <el-tooltip
              placement="right"
              effect="light"
              :disabled="!formatPnl(scope.data.day)"
            >
              <div slot="content">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div v-if="tipsType === 1" :style="`width:${maxNameWidth}px`">
                    名称
                  </div>
                  <div v-else :style="`width:${maxClassNameWidth}px`">名称</div>
                  <div style="width: 80px">回测</div>
                  <div style="width: 80px">实盘</div>
                </div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                  v-for="item in formatTipList(scope.data.day)"
                  :key="item.name"
                >
                  <div v-if="tipsType === 1" :style="`width:${maxNameWidth}px`">
                    {{ item.name }}
                  </div>
                  <div v-else :style="`width:${maxClassNameWidth}px`">
                    {{ item.name }}
                  </div>
                  <div style="width: 80px">{{ item.pnl }}%</div>
                  <div style="width: 80px">{{ item.realPnl }}%</div>
                </div>
              </div>
              <div
                :class="{
                  'cell-income': true,
                  negative: formatPnl(scope.data.day) < 0,
                  high: formatPnl(scope.data.day) > 0,
                }"
                @mousemove="
                  getClassifyReportByCompositionIdAndWeek(scope.data.day)
                "
              >
                <p style="font-size: 18px; padding: 10px 0">
                  {{ scope.data.day.split("-")[2] }}
                </p>
                <p>{{ formatPnl(scope.data.day, "%") }}</p>
                <p>
                  {{ formatRealPnl(scope.data.day, "%") }}
                </p>
                <p
                  v-if="
                    formatRealPnl(scope.data.day) === '' &&
                    formatPnl(scope.data.day) === ''
                  "
                >
                  -
                </p>
              </div>
            </el-tooltip>
          </template>
        </el-calendar>
        <div class="weekProfitLoss">
          <div class="title">周汇总</div>
          <div class="cell" v-for="item in weekProfitLossData" :key="item.id">
            <el-tooltip placement="right" effect="light" :disabled="!item.pnl">
              <div slot="content">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div v-if="tipsType === 1" :style="`width:${maxNameWidth}px`">
                    名称
                  </div>
                  <div v-else :style="`width:${maxClassNameWidth}px`">名称</div>
                  <div style="margin: 0 10px; width: 100px">
                    <span>回测</span>
                    / <span class="gray">最大回撤</span>
                  </div>
                  <div style="width: 100px">
                    <span>实盘</span>
                    /<span class="gray">最大回撤</span>
                  </div>
                </div>

                <div
                  v-for="citem in formatWeekTipList(item)"
                  :key="citem.name"
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div v-if="tipsType === 1" :style="`width:${maxNameWidth}px`">
                    {{ citem.name }}
                  </div>
                  <div v-else :style="`width:${maxClassNameWidth}px`">
                    {{ citem.name }}
                  </div>
                  <div style="width: 100px">
                    <span>{{ citem.pnl }}%</span>
                    /
                    <span class="gray">{{ citem.maxDwon || "-" }}%</span>
                  </div>
                  <div style="width: 100px">
                    <span>{{ citem.realPnl }}%</span>
                    /
                    <span class="gray">{{ citem.realMaxDwon || "-" }}%</span>
                  </div>
                </div>
              </div>
              <div
                :class="{
                  negative: item.weekPnl < 0,
                  high: item.weekPnl > 0,
                }"
                @mousemove="
                  getClassifyReportByCompositionIdAndWeek(
                    item.netWorthTime,
                    item.week
                  )
                "
              >
                <p style="height: 30px"></p>
                <div
                  v-if="
                    !item.weekPnl &&
                    !item.weekMaxDown &&
                    !item.realWeekPnl &&
                    !item.realWeekMaxDown
                  "
                >
                  -
                </div>
                <div v-else>
                  <p>
                    <span>{{ item.weekPnl }}%</span>
                    /
                    <span class="gray">{{ item.weekMaxDown || "-" }}%</span>
                  </p>
                  <p>
                    <span>{{ item.realWeekPnl }}%</span>
                    /
                    <span class="gray">{{ item.realWeekMaxDown || "-" }}%</span>
                  </p>
                </div>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- 年度 -->
      <div class="yearIncom" v-show="dateType === 'year'">
        <div
          class="cell"
          v-for="item in yearMonth"
          :key="item.id"
          @click="jumpMonth(item)"
        >
          <el-tooltip placement="right" effect="light" :disabled="!item.pnl">
            <div slot="content">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  min-width: 150px;
                "
              >
                <div v-if="tipsType === 1" :style="`width:${maxNameWidth}px`">
                  名称
                </div>
                <div v-else :style="`width:${maxClassNameWidth}px`">名称</div>
                <div style="margin: 0 10px; width: 110px">
                  <span>回测</span>
                  /<span class="gray">最大回撤</span>
                </div>
                <div style="width: 110px">
                  <span>实盘</span>
                  /<span class="gray">最大回撤</span>
                </div>
              </div>
              <div
                v-for="item in formatTipYearList(item.month)"
                :key="item.name"
                style="
                  display: flex;
                  justify-content: space-between;
                  min-width: 150px;
                "
              >
                <div v-if="tipsType === 1" :style="`width:${maxNameWidth}px`">
                  {{ item.name }}
                </div>
                <div v-else :style="`width:${maxClassNameWidth}px`">
                  {{ item.name }}
                </div>
                <div style="width: 100px">
                  <span>{{ item.pnl }}%</span>
                  /
                  <span class="gray">{{ item.maxDwon || "-" }}%</span>
                </div>
                <div style="width: 100px">
                  <span>{{ item.realPnl }}%</span>
                  /
                  <span class="gray">{{ item.realMaxDwon || "-" }}%</span>
                </div>
              </div>
            </div>
            <div
              :class="{
                'cell-income': true,
                negative: item.pnl < 0,
                high: item.pnl > 0,
              }"
              style="font-size: 12px"
              @mousemove="getReportByCompositionIdYear(item.year, item.month)"
            >
              <p style="font-size: 18px; padding: 10px 0">
                {{ item.monthName }}
              </p>
              <div
                v-if="
                  !item.pnl &&
                  !item.maxDown &&
                  !item.realPnl &&
                  !item.realMaxDown
                "
              >
                -
              </div>
              <div v-else>
                <p>
                  <span>{{ item.pnl }}%</span>
                  /
                  <span class="gray">{{ item.maxDown || "-" }}%</span>
                </p>
                <p>
                  <span>{{ item.realPnl }}%</span>
                  /
                  <span class="gray">{{ item.realMaxDown || "-" }}%</span>
                </p>
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  weekMonthReport,
  getClassifyReportByCompositionIdAndWeek,
  getStrategyReportByCompositionIdAndWeek,
  monthYearReport,
  getClassifyReportByCompositionIdAndMonth,
  getStrategyReportByCompositionIdAndMonth,
} from "@/api/combManage";
import { getMaxLength } from "@/utils/pro";

export default {
  name: "ProfitLossDialog",
  data: () => {
    return {
      monthPnl: 0,
      monthMaxDown: 0,
      monthRealPnl: 0,
      monthRealMaxDown: 0,
      yearMaxDown: 0,
      realYearMaxDown: 0,
      yearPnl: 0,
      realYearPnl: 0,
      ajaxLoad: true,
      maxClassNameWidth: 100,
      maxNameWidth: 100,
      tipsType: 0,
      formData: {
        year: "",
        month: "",
        compositionId: "", // 组合id
      },
      yearMonth: [
        { monthName: "一月", id: 1, tips: { classList: [], strategyList: [] } },
        { monthName: "二月", id: 2, tips: { classList: [], strategyList: [] } },
        { monthName: "三月", id: 3, tips: { classList: [], strategyList: [] } },
        { monthName: "四月", id: 4, tips: { classList: [], strategyList: [] } },
        { monthName: "五月", id: 5, tips: { classList: [], strategyList: [] } },
        { monthName: "六月", id: 6, tips: { classList: [], strategyList: [] } },
        { monthName: "七月", id: 7, tips: { classList: [], strategyList: [] } },
        { monthName: "八月", id: 8, tips: { classList: [], strategyList: [] } },
        { monthName: "九月", id: 9, tips: { classList: [], strategyList: [] } },
        {
          monthName: "十月",
          id: 10,
          tips: { classList: [], strategyList: [] },
        },
        {
          monthName: "十一月",
          id: 11,
          tips: { classList: [], strategyList: [] },
        },
        {
          monthName: "十二月",
          id: 12,
          tips: { classList: [], strategyList: [] },
        },
      ],
      weekProfitLossData: [
        {
          id: 994,
          weekName: "第一周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: 995,
          weekName: "第二周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: 996,
          weekName: "第三周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: 997,
          weekName: "第四周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: 998,
          weekName: "第五周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: 999,
          weekName: "第六周",
          tips: { classList: [], strategyList: [] },
        },
      ],
      date: "",
      dateYear: "",
      dateType: "month",
      calendarDate: "",
      dialogVisible: false,
      reportData: [],
      earnType: 1,
    };
  },
  props: {
    netWorthEndTime: {
      type: String | Number,
      default: "",
    },
    startTime: {
      type: String | Number,
      default: "",
    },
    endTime: {
      type: String | Number,
      default: "",
    },
    profitLossDialogVisible: {
      type: Boolean | Number,
      default: "",
    },
    compositionId: {
      type: Number | String,
      default: "",
    },
    realquery: {
      type: Object | Array,
      default: "",
    },
  },
  watch: {
    profitLossDialogVisible(newVal, oldVal) {
      if (newVal) {
        this.dialogVisible = newVal;
        this.formData.compositionId = +this.compositionId;
        if (this.formData.year !== "") {
          this.weekMonthReport();
        }
        // this.$nextTick(() => {
        this.calendarDate = new Date(this.netWorthEndTime);
        // });
      }
    },
    date(newVal, oldVal) {
      this.calendarDate = new Date(newVal);
    },
    // 选择年
    dateYear(newVal, oldVal) {
      this.formData.year = newVal.getFullYear();
      this.formData.month = "";
      this.monthYearReport();
    },
    // 切换年/月
    dateType(newVal, oldVal) {
      this.dateYear = this.dateYear ? this.dateYear : new Date(this.endTime);
      if (newVal === "year") {
        this.formData.year = this.dateYear
          ? this.dateYear.getFullYear()
          : new Date().getFullYear();
        this.formData.month = "";
        this.monthYearReport();
      } else {
        this.formData.month = this.date.getMonth() + 1;
        this.weekMonthReport();
      }
    },
    // 选中日期
    calendarDate(newVal, oldVal) {
      const year = newVal.getFullYear();
      const month = newVal.getMonth() + 1;
      const old_year = oldVal ? oldVal.getFullYear() : "";
      const old_month = oldVal ? oldVal.getMonth() + 1 : "";
      if (year !== old_year || month !== old_month) {
        this.date = new Date(`${year}-${month}-01`);
        this.formData.year = year;
        this.formData.month = month;
        this.weekMonthReport();
      }
    },
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate: (time) => {
          return (
            time.getTime() > new Date(this.endTime).getTime() ||
            time.getTime() < new Date(this.startTime).getTime()
          );
        },
      };
    },
    // tips
    formatTipList() {
      return function (date) {
        const row = this.reportData.filter((item) => {
          return item.netWorthTime === date;
        });
        if (row.length) {
          if (this.tipsType === 0) {
            return row[0].tips.classList;
          } else {
            return row[0].tips.strategyList;
          }
        }
        return "";
      };
    },
    formatWeekTipList() {
      return function (item) {
        if (this.tipsType === 0) {
          return item.tips.classList;
        } else {
          return item.tips.strategyList;
        }
      };
    },
    formatTipYearList() {
      return function (month) {
        const row = this.yearMonth.filter((item) => {
          return item.month === month;
        });
        if (row.length) {
          if (this.tipsType === 0) {
            return row[0].tips.classList;
          } else {
            return row[0].tips.strategyList;
          }
        }
        return "";
      };
    },
    // 回测
    formatPnl() {
      return function (date, endText) {
        const row = this.reportData.filter((item) => {
          return item.netWorthTime === date;
        });
        if (row.length) {
          if (endText && row[0].pnl) {
            return row[0].pnl + endText;
          }
          return row[0].pnl;
        }
        return "";
      };
    },
    // 实盘
    formatRealPnl() {
      return function (date, endText) {
        const row = this.reportData.filter((item) => {
          return item.netWorthTime === date;
        });
        if (row.length) {
          if (endText && row[0].realPnl) {
            return row[0].realPnl + endText;
          }
          return row[0].realPnl;
        }
        return "";
      };
    },
  },
  created: () => {
    // console.log('created')
  },
  mounted: () => {
    // console.log('mounted')
  },
  methods: {
    getWeek(dateTime) {
      const temptTime = new Date(dateTime);
      //周几
      const weekday = temptTime.getDay() || 7;
      //周1+5天=周六
      temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
      let firstDay = new Date(temptTime.getFullYear(), 0, 1);
      const dayOfWeek = firstDay.getDay();
      let spendDay = 1;
      if (dayOfWeek != 0) {
        spendDay = 7 - dayOfWeek + 1;
      }
      firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
      const d = Math.ceil(
        (temptTime.valueOf() - firstDay.valueOf()) / 86400000
      );
      const result = Math.ceil(d / 7);
      return result;
    },
    weekMonthReport() {
      // 初始化周汇总
      const starWeek = this.getWeek(
        this.formData.year + "-" + this.formData.month + "-01"
      );
      this.weekProfitLossData = [
        {
          id: starWeek,
          weekName: "第一周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: starWeek + 1,
          weekName: "第二周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: starWeek + 2,
          weekName: "第三周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: starWeek + 3,
          weekName: "第四周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: starWeek + 4,
          weekName: "第五周",
          tips: { classList: [], strategyList: [] },
        },
        {
          id: starWeek + 5,
          weekName: "第六周",
          tips: { classList: [], strategyList: [] },
        },
      ];
      weekMonthReport({
        childrenId: this.realquery.childrenId || "",
        childrenType: this.realquery.childrenType || "",
        childrenName: this.realquery.childrenName || "",
        ...this.formData,
      }).then((res) => {
        res.body.map((item) => {
          this.monthPnl = item.monthPnl;
          this.monthMaxDown = item.monthMaxDown;
          this.monthRealPnl = item.monthRealPnl;
          this.monthRealMaxDown = item.monthRealMaxDown;
        });
        this.reportData = res.body.map((item) => {
          const row = {
            ...item,
            tips: {
              classList: [],
              strategyList: [],
            },
          };
          return row;
        });
        const weekNum = [];
        res.body.map((item) => {
          if (!weekNum[item.week]) {
            weekNum[item.week] = item.week;
          }
          this.weekProfitLossData.map((citem, index) => {
            if (citem.id === item.week) {
              this.weekProfitLossData[index] = {
                ...item,
                ...citem,
              };
            }
          });
        });
        this.$forceUpdate();
        // console.log(weekNum);
        // console.log(this.weekProfitLossData);
      });
    },

    monthYearReport() {
      monthYearReport({
        childrenId: this.realquery.childrenId,
        childrenType: this.realquery.childrenType,
        childrenName: this.realquery.childrenName,
        ...this.formData,
      }).then((res) => {
        res.body.map((item) => {
          this.yearMaxDown = item.yearMaxDown;
          this.realYearMaxDown = item.realYearMaxDown;
          this.yearPnl = item.yearPnl;
          this.realYearPnl = item.realYearPnl;
          this.yearMonth.map((citem, i) => {
            if (citem.id === item.month) {
              this.yearMonth[i] = {
                ...citem,
                ...item,
                realPnl: item.realPnl || "-",
                realMaxDown: item.realMaxDown || "-",
                pnl: item.pnl || "-",
                maxDown: item.maxDown || "-",
                tips: {
                  classList: [],
                  strategyList: [],
                },
              };
            }
          });
        });
      });
    },
    getReportByCompositionIdYear(year, month) {
      const row = this.yearMonth.filter((item) => {
        return item.month === month;
      });
      if (row.length) {
        if (!row[0].tips.classList.length && this.ajaxLoad) {
          this.ajaxLoad = false;
          getClassifyReportByCompositionIdAndMonth({
            childrenId: this.realquery.childrenId,
            childrenType: this.realquery.childrenType,
            childrenName: this.realquery.childrenName,
            compositionId: this.formData.compositionId,
            year: year,
            month: month,
          }).then((res) => {
            const nameArr = res.body.map((x) => x.name);
            this.maxClassNameWidth = getMaxLength(nameArr) + 25;
            console.log(this.maxClassNameWidth);
            this.ajaxLoad = true;
            row[0].tips.classList = res.body;
            this.$forceUpdate();
          });
        }
        if (!row[0].tips.strategyList.length && this.ajaxLoad) {
          this.ajaxLoad = false;
          getStrategyReportByCompositionIdAndMonth({
            childrenId: this.realquery.childrenId,
            childrenType: this.realquery.childrenType,
            childrenName: this.realquery.childrenName,
            compositionId: this.formData.compositionId,
            year: year,
            month: month,
          }).then((res) => {
            const nameArr = res.body.map((x) => x.name);
            this.maxNameWidth = getMaxLength(nameArr) + 25;
            this.ajaxLoad = true;
            row[0].tips.strategyList = res.body;
            this.$forceUpdate();
          });
        }
      }
    },
    getClassifyReportByCompositionIdAndWeek(date, week) {
      let row = this.reportData.filter((item) => {
        return item.netWorthTime === date;
      });
      if (week) {
        row = this.weekProfitLossData.filter((item) => {
          return item.week === week;
        });
      }
      if (row.length) {
        if (
          !row[0].tips.classList.length &&
          this.ajaxLoad &&
          this.tipsType === 0
        ) {
          this.ajaxLoad = false;
          getClassifyReportByCompositionIdAndWeek({
            childrenId: this.realquery.childrenId,
            childrenType: this.realquery.childrenType,
            childrenName: this.realquery.childrenName,
            compositionId: this.formData.compositionId,
            netWorthTime: week ? "" : date,
            year: date.split("-")[0],
            week: week,
            isWeek: week ? 1 : 0,
          }).then((res) => {
            const nameArr = res.body.map((x) => x.name);
            this.maxClassNameWidth = getMaxLength(nameArr) + 25;
            this.ajaxLoad = true;
            this.$set(row[0].tips, "classList", res.body);
            if (week) {
              this.$forceUpdate();
            }
          });
        }
        if (
          !row[0].tips.strategyList.length &&
          this.ajaxLoad &&
          this.tipsType === 1
        ) {
          this.ajaxLoad = false;
          getStrategyReportByCompositionIdAndWeek({
            childrenId: this.realquery.childrenId,
            childrenType: this.realquery.childrenType,
            childrenName: this.realquery.childrenName,
            compositionId: this.formData.compositionId,
            netWorthTime: week ? "" : date,
            year: date.split("-")[0],
            week: week,
            isWeek: week ? 1 : 0,
          }).then((res) => {
            const nameArr = res.body.map((x) => x.name);
            this.maxNameWidth = getMaxLength(nameArr) + 25;
            this.ajaxLoad = true;
            row[0].tips.strategyList = res.body;
            if (week) {
              this.$forceUpdate();
            }
          });
        }
      }
    },
    // 跳转到指定月
    jumpMonth(row) {
      this.date = new Date(this.date.getFullYear() + "-" + row.id + "-01");
      this.dateType = "month";
    },
    dialogClose() {
      this.$emit("update:profitLossDialogVisible", false);
    },
  },
};
</script>
<style lang="scss">
// .el-calendar-table {
// }
.aMDialog {
  .el-dialog__header {
    .el-dialog__title {
      font-weight: bold;
    }
    .el-dialog__close {
      font-size: 20px;
    }
  }
  .el-dialog__body {
    padding: 16px 20px;
    color: rgba(0, 0, 0, 0.75);
    border-top: 1px solid #f0f0f0;
  }
}
.tg-el-calendar {
  .el-calendar-day {
    padding: 0;
    background-color: #fff;
  }
  // td {
  // border-bottom: 1px solid #fff;
  // border-right: 1px solid #fff;
  // }
  .el-calendar__header {
    display: none;
  }
  .el-calendar__body {
    padding: 12px 0px 0;
    border-top: 1px solid #ebeef5;
  }
}
</style>
<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}
.cell-income {
  height: 100%;
  text-align: center;
}
.dialog-header {
  .top {
    display: flex;
    padding-bottom: 15px;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    height: 66px;
  }
}
.negative {
  background: #daeed5;
}
.high {
  background: #fcc6ba;
}
.yearIncom {
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  .cell {
    cursor: pointer;
    width: 108px;
    height: 85px;
    display: inline-block;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    vertical-align: top;
  }
}
.monthProfitLoss {
  display: flex;
  justify-content: center;
  .weekProfitLoss {
    padding: 12px 0px 0;
    width: 120px;
    min-width: 120px;
    border-top: 1px solid #ebeef5;
    .title {
      padding: 12px 0;
      color: #606266;
      font-weight: 400;
      font-size: 14px;
      text-align: center;
    }
    .cell {
      &:nth-child(2) {
        border-top: 1px solid #ebeef5;
      }
      width: 120px;
      height: 86px;
      overflow: hidden;
      display: inline-block;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      vertical-align: top;
      text-align: center;
      .negative {
        height: 100%;
      }
      .high {
        height: 100%;
      }
    }
  }
}
</style>
